
<!--
Author: W3layouts
Author URL: http://w3layouts.com
-->
<!DOCTYPE html>
<html lang="zxx">

<head>
    <title>奇酷内部网</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords"
        content="Report Login Form Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <!-- //Meta tag Keywords -->
    <!-- <link href="//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap" rel="stylesheet"> -->
    <!--/Style-CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css">
    <!--//Style-CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-5.0.2-dist/css/bootstrap.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ url_for('static', filename='Semantic-UI-CSS-master/semantic.min.css')}}" type="text/css">

 <style>
    #paymentSuccess {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background-color: #2f302f;
      color: #4496e2;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      text-align: center;
      animation: slideIn 0.5s ease-out;
      z-index: 999;
    }
    @keyframes slideIn {
      from {
        transform: translate(-50%, -120%);
        opacity: 0;
      }
      to {
        transform: translate(-50%, -50%);
        opacity: 1;
      }
    }
    .content123{
       height: 100%;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
    }
    .content123 .ui{
       color: white
    }


  </style>
</head>

<body>
    <!-- form section start -->
    <section class="w3l-hotair-form">
        <h1>奇酷内部咖啡券系统</h1>
        <div class="container">
            <!-- /form -->
            <div class="workinghny-form-grid">
                <div class="main-hotair">
                    <div class="content-wthree">
                        <h2>咖啡券</h2>
                        <div class="mb-3">
                            <label for="classes" class="form-label">班级</label>
                            <select  class="text" id="classes">
                                <option selected disabled>Choose...</option>  <!-- 默认选项 -->
                                {% for cls in classes %}
                                <option value="{{ cls.id }}">{{ cls.name }}</option>  <!-- 动态生成optionclass选项 -->
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="students" class="form-label">姓名</label>
                            <select  class="text" id="students" disabled>
                                option selected disabled>Choose...</option>  <!-- 默认选项 -->
                            </select>

                        </div>                            

                        <button class="btn" type="button" id="sendButton" disabled>领取咖啡券</button>

{#                        <p class="account">Don't have an account? <a href="#signup">Register</a></p>#}
                    </div>
                    <div class="w3l_form align-self">
                        <div class="left_grid_info">
                            <img src="../static/images/1.png" alt="" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
            <!-- //form -->

        </div>
        <!-- copyright-->
        <div class="copyright text-center">
            <p class="copy-footer-29">© 2021 Report Login Form. All rights reserved | Design by <a
                        href="https://w3layouts.com"></a></p>
        </div>

        <!-- //copyright-->
    </section>
    <div id="paymentSuccess" class="animate__animated animate__fadeInDownBig" >
            <h2>发送成功</h2>
            <p>请检查邮箱</p>
    </div>



    <!-- //form section start -->
<script src="../static/js/jquery-3.7.1.min.js"></script><!-- 引入jQuery -->
    <script src="../static/bootstrap-5.0.2-dist/js/bootstrap.min.js"></script>
      <script src="../static/Semantic-UI-CSS-master/semantic.min.js"></script>

    <script>
         $(document).ready(function() {  // 文档加载完成后执行
            $('#classes').on('change', function() {  // 当班级的值改变时执行
                var classCode = $(this).val();  // 获取选中的班级代码
                if (classCode) {  // 如果代码有效
                    $.getJSON('/get_students/' + classCode, function(data) {  // 发送GET请求到指定URL
                        var studentSelect = $('#students');  // 获取学生下拉菜单
                        studentSelect.empty();  // 清空学生下拉菜单
                        studentSelect.append('<option selected disabled>Choose...</option>');  // 添加默认选项
                        $.each(data, function(index, student) {  // 遍历返回的学生数据
                            studentSelect.append('<option value="' + student.id + '">' + student.name + '</option>');  // 添加学生选项
                        });
                        studentSelect.prop('disabled', false);  // 启用学生下拉菜单
                        $('#sendButton').prop('disabled', true); // 禁用发送按钮
                    });
                } else {
                    $('#students').empty().append('<option selected disabled>Choose...</option>').prop('disabled', true);  // 如果代码无效，则清空学生下拉菜单并添加默认选项，禁用学生下拉菜单
                    $('#sendButton').prop('disabled', true); // 禁用发送按钮
                }
            });
            $('#students').on('change', function() {
                var selectedOption = $(this).find('option:selected');
                if (selectedOption.val()) {
                    $('#sendButton').prop('disabled', false); // 启用发送按钮
                } else {
                    $('#sendButton').prop('disabled', true); // 禁用发送按钮
                }
            });
            $('#sendButton').on('click', function showPaymentSuccess() {
                var selectedOption = $('#students').find('option:selected');
                var studentName = selectedOption.val();
                var paymentSuccessPopup = document.getElementById('paymentSuccess');

                $.post('/send_email',{name:studentName}).then(ret=> {
                    paymentSuccessPopup.style.display = 'block';
                    paymentSuccessPopup.querySelector("h2").innerHTML = "发送成功"
                    paymentSuccessPopup.querySelector("p").innerHTML = "请检查邮箱"
                    setTimeout(function () {
                        paymentSuccessPopup.style.display = 'none';
                    }, 3000);
                }).catch(error=> {
                    paymentSuccessPopup.querySelector("h2").innerHTML = "发送失败"
                    paymentSuccessPopup.querySelector("p").innerHTML = error.responseJSON.message
                    paymentSuccessPopup.style.display = 'block';
                    setTimeout(function () {
                        paymentSuccessPopup.style.display = 'none';
                    }, 3000);
                })
            });
        });
    </script>
</body>
</html>